<template>
  <div
    ref="backTopRef"
    :class="{
      backTop: true,
      backHide: backChoose,
      backActive: !backChoose,
    }"
    @click="handleBackTop"
  ></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const backChoose = ref(true);
const backTopRef = ref<HTMLElement>();

onMounted(() => {
  const parent = backTopRef.value?.parentElement;
  parent &&
    parent.addEventListener("scroll", () => {
      backChoose.value = document.documentElement.clientHeight >= parent.scrollTop;
    });
});

const handleBackTop = () => {
  const parent = backTopRef.value?.parentElement;
  parent && parent.scrollTo({ top: 0, behavior: "smooth" });
};
</script>

<style scoped lang="less">
.backTop {
  position: fixed;
  cursor: pointer;
  right: 30px;
  top: 0;
  z-index: 999;
  width: 70px;
  height: 900px;
  transition: all 0.6s;
  background: url("")
    no-repeat;
}
.backHide {
  transform: translateY(-100%);
}
.backActive {
  transform: translateY(-35%);
}
</style>
